<template>
  <div class="main">
       <mt-header title="登 录">
             <!-- <mt-button    icon="back" slot="left">返回</mt-button> -->
       </mt-header>
    <div id="wapper" style="padding-bottom: 0;">
    
      <div id="login">
        
        <div class="login-icon">
          <div class="icon">
            <img src="../../assets/images/myc/login_icon.png" alt="" />
          </div>
          <div class="icon_text">代理商在线签约</div>
        </div>
         <div id="mtop" class="line line1 clearfix">
           <span class="icon_tit1"></span>
          <!-- <p class="line-title">手机号码</p> -->
             <input v-model="phone" type="tel" maxlength="11" class="line-input" placeholder="请输入手机号码" /> 
         <span class="icon icon1" @click="clearphone"></span>  
        </div>
        <div class="line line1 clearfix">
          <span class="icon_tit2"></span>
          <!-- <p class="line-title">密码</p> -->
          
          <input v-model="pwd" :type="pwdType" maxlength="20" class="line-input" placeholder="请输入密码" /> 
          <span class="icon" :class="ispwd?'icon2':'icon3'" @click="seepwd">
            
          </span>  
        </div>
        
        <p class="login-btn margin-center" @click="login">登录</p>
        <div class="bottom">
          <div class="loginBottom">
          
            <div class="halfLine"></div>
            <div class="smPoint"></div>
            <div class="text">妙 优 车 销 售 版</div>
            <div class="smPoint"></div>
            <div class="halfLine"></div>
            
          </div>
          <div class="company">河南聚融优合汽车服务有限公司</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast, Header } from "mint-ui";
import MyHeader from "@/components/header";
import { fetchPostData, host } from "@/api";
import Vue from "vue";
import qs from "qs";

export default {
  data() {
    return {
      inputType1: "text",
      flag: true,
      phone: "",
      pwd: "",
      headerParam: {
        title: "银行转账",
        setting: 0,
        back: 1
      },
      ispwd:true,
      pwdType:"password",
      pwdicon:require('../../assets/images/myc/pwdOpen.png'),
    };
  },

  methods: {
    clearphone() {
      this.phone = "";
    },
    seepwd() {
        if(this.ispwd){
        this.pwdType = "text";
       this.pwdicon=require('../../assets/images/myc/seepwd.png');
        this.ispwd=false;
        }else{
          this.pwdType = "password";
          this.pwdicon=require('../../assets/images/myc/pwdOpen.png');
          this.ispwd=true;
        }
      
      
    },
    
    //显示隐藏密码
    changeEye(attr) {
      if (this[attr] == "text") {
        this[attr] = "password";
      } else {
        this[attr] = "text";
      }
    },
    login() {
      
      let phone_reg = /^1[3456789]\d{9}$/;
      if (!this.phone || !this.pwd) {
        this.toast("请输入手机号或密码");
        return false;
      }
      if (!phone_reg.test(this.phone)) {
        this.toast("手机号码格式错误");
        return false;
      }
      if (this.pwd.length < 5) {
        this.toast("密码错误");
        this.pwd = "";
        return false;
      }
      let _that = this;
      let formdata = new FormData();
      formdata.append("mobile", this.phone);
      formdata.append("password", this.pwd);
    
    
      fetchPostData(host + "/agent/proxy/fastLogin",formdata).then(res=>{
       if(res.status==1){
           this.toast("登录成功");
            _that.$store.dispatch("userLogin", JSON.parse(res.data), );
            _that.addSession("us", res.data);
             _that.addSession("phone",_that.phone);
            _that.$router.push({ path: "/" });
       }else{
            this.toast("登陆失败" + res.message);
       }
      })
    },
    toast(text) {
      //toast弹窗
      let param = { position: "bottom" };
      param.message = text;
      Toast(param);
    }
  },
  mounted: function() {
     
  }
};
</script>
<style lang="less" scoped>
.mint-header {
  z-index: 20;
  background-color: #fff;
  color: #131313;
  border-bottom: 1px solid #f7f7f7;
}
.mint-header-title {
  letter-spacing: 2px;
  font-weight: bold;
}
.icon_tit1 {
  display: inline-block;
  width: 0.25rem;
  height: .36rem;
  background: url(../../assets/images/myc/login_phone.png) no-repeat center;
  background-size: contain; 
  margin-left: 0.62rem;
  vertical-align: middle;
}
#mtop{
  margin-top: 0.9rem;
}
.line{
  width: 96%;
  margin:0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height:.6rem;
    border-bottom: 1px solid #FFEC9F;
}
 
.icon_tit2 {
  display: inline-block;
  width: 0.28rem;
  height: .36rem;
  margin-left: 0.62rem;
  background: url(../../assets/images/myc/login_pwd.png) no-repeat center;
  background-size: contain;
  vertical-align: middle;
 
}
.icon1{
  background: url(../../assets/images/myc/deltext.png) no-repeat center;
}
.icon2{
  background: url(../../assets/images/myc/seepwd.png) no-repeat center;
}
.icon3{
  background: url(../../assets/images/myc/pwdOpen.png) no-repeat center;
}
.loginBottom{
  
    width:50%;
  margin:0 auto;
  display: flex;
 
  align-items: center;
   height:40px;
     line-height:40px;
   .text{
     padding:0 3px;
     font-size:.28rem;
     color: #333333;
     flex: 4;
     text-align: center;
   }
    
.halfLine{
  flex:1; 
  height:1px;
  background-color: #FFD062;
  width: 0.48rem;
}
 .smPoint{
   width:5px;
   height: 5px;
   border-radius:50%;
   background-color: #FFD062;
  }
}
.bottom{
  width: 100%;
  
  margin-top: 2.03rem;
 
}
.company{
  font-size: 0.24rem;
  color: #999999;
  text-align: center;
  line-height:.35rem;
}
</style>


